{% extends 'ApplicationToolsBundle::layout.html.twig' %}

{% block title %}Grid - fluid 16{% endblock %}

{% block javascripts %}
    <script src="{{ asset('bundles/applicationtools/js/screen_size.js') }}" type="text/javascript"></script>
    <script src="{{ asset('bundles/applicationtools/js/cell.js') }}" type="text/javascript"></script>
{% endblock %}

{% block body %}

<div class="grid_row">
    <div class="grid_16">
        <h4>Fluid 16</h4>
        <h5 id="console"></h5>
    </div>
    <div class="clear"></div>
</div>

<div id="grid" class="grid_row">
    <div class="grid_1">
        <div class="box example-block">
            <p>01 - <span class="dynamic-px-width"></span></p>
        </div>
    </div>
    <div class="grid_1">
        <div class="box example-block">
            <p>02 - <span class="dynamic-px-width"></span></p>
        </div>
    </div>
    <div class="grid_1">
        <div class="box example-block">
            <p>03 - <span class="dynamic-px-width"></span></p>
        </div>
    </div>
    <div class="grid_1">
        <div class="box example-block">
            <p>04 - <span class="dynamic-px-width"></span></p>
        </div>
    </div>
    <div class="grid_1">
        <div class="box example-block">
            <p>05 - <span class="dynamic-px-width"></span></p>
        </div>
    </div>
    <div class="grid_1">
        <div class="box example-block">
            <p>06 - <span class="dynamic-px-width"></span></p>
        </div>
    </div>
    <div class="grid_1">
        <div class="box example-block">
            <p>07 - <span class="dynamic-px-width"></span></p>
        </div>
    </div>
    <div class="grid_1">
        <div class="box example-block">
            <p>08 - <span class="dynamic-px-width"></span></p>
        </div>
    </div>
    <div class="grid_1">
        <div class="box example-block">
            <p>09 - <span class="dynamic-px-width"></span></p>
        </div>
    </div>
    <div class="grid_1">
        <div class="box example-block">
            <p>10 - <span class="dynamic-px-width"></span></p>
        </div>
    </div>
    <div class="grid_1">
        <div class="box example-block">
            <p>11 - <span class="dynamic-px-width"></span></p>
        </div>
    </div>
    <div class="grid_1">
        <div class="box example-block">
            <p>12 - <span class="dynamic-px-width"></span></p>
        </div>
    </div>
    <div class="grid_1">
        <div class="box example-block">
            <p>13 - <span class="dynamic-px-width"></span></p>
        </div>
    </div>
    <div class="grid_1">
        <div class="box example-block">
            <p>14 - <span class="dynamic-px-width"></span></p>
        </div>
    </div>
    <div class="grid_1">
        <div class="box example-block">
            <p>15 - <span class="dynamic-px-width"></span></p>
        </div>
    </div>
    <div class="grid_1">
        <div class="box example-block">
            <p>16 - <span class="dynamic-px-width"></span></p>
        </div>
    </div>
    <div class="clear"></div>
    <div class="grid_2">
        <div class="box example-block">
            <p>01 - <span class="dynamic-px-width"></span></p>
        </div>
    </div>
    <div class="grid_2">
        <div class="box example-block">
            <p>02 - <span class="dynamic-px-width"></span></p>
        </div>
    </div>
    <div class="grid_2">
        <div class="box example-block">
            <p>03 - <span class="dynamic-px-width"></span></p>
        </div>
    </div>
    <div class="grid_2">
        <div class="box example-block">
            <p>04 - <span class="dynamic-px-width"></span></p>
        </div>
    </div>
    <div class="grid_2">
        <div class="box example-block">
            <p>05 - <span class="dynamic-px-width"></span></p>
        </div>
    </div>
    <div class="grid_2">
        <div class="box example-block">
            <p>06 - <span class="dynamic-px-width"></span></p>
        </div>
    </div>
    <div class="grid_2">
        <div class="box example-block">
            <p>07 - <span class="dynamic-px-width"></span></p>
        </div>
    </div>
    <div class="grid_2">
        <div class="box example-block">
            <p>08 - <span class="dynamic-px-width"></span></p>
        </div>
    </div>
    <div class="clear"></div>
    <div class="grid_3">
        <div class="box example-block">
            <p>01 - <span class="dynamic-px-width"></span></p>
        </div>
    </div>
    <div class="grid_3">
        <div class="box example-block">
            <p>02 - <span class="dynamic-px-width"></span></p>
        </div>
    </div>
    <div class="grid_3">
        <div class="box example-block">
            <p>03 - <span class="dynamic-px-width"></span></p>
        </div>
    </div>
    <div class="grid_3">
        <div class="box example-block">
            <p>04 - <span class="dynamic-px-width"></span></p>
        </div>
    </div>
    <div class="grid_4">
        <div class="box example-block">
            <p>05 - <span class="dynamic-px-width"></span></p>
        </div>
    </div>
    <div class="clear"></div>
    <div class="grid_4">
        <div class="box example-block">
            <p>01 - <span class="dynamic-px-width"></span></p>
        </div>
    </div>
    <div class="grid_4">
        <div class="box example-block">
            <p>02 - <span class="dynamic-px-width"></span></p>
        </div>
    </div>
    <div class="grid_4">
        <div class="box example-block">
            <p>03 - <span class="dynamic-px-width"></span></p>
        </div>
    </div>
    <div class="grid_4">
        <div class="box example-block">
            <p>04 - <span class="dynamic-px-width"></span></p>
        </div>
    </div>
    <div class="clear"></div>
    <div class="grid_5">
        <div class="box example-block">
            <p>01 - <span class="dynamic-px-width"></span></p>
        </div>
    </div>
    <div class="grid_5">
        <div class="box example-block">
            <p>02 - <span class="dynamic-px-width"></span></p>
        </div>
    </div>
    <div class="grid_6">
        <div class="box example-block">
            <p>03 - <span class="dynamic-px-width"></span></p>
        </div>
    </div>
    <div class="clear"></div>
    <div class="grid_6">
        <div class="box example-block">
            <p>01 - <span class="dynamic-px-width"></span></p>
        </div>
    </div>
    <div class="grid_5">
        <div class="box example-block">
            <p>02 - <span class="dynamic-px-width"></span></p>
        </div>
    </div>
    <div class="grid_5">
        <div class="box example-block">
            <p>03 - <span class="dynamic-px-width"></span></p>
        </div>
    </div>
    <div class="clear"></div>
    <div class="grid_7">
        <div class="box example-block">
            <p>01 - <span class="dynamic-px-width"></span></p>
        </div>
    </div>
    <div class="grid_5">
        <div class="box example-block">
            <p>02 - <span class="dynamic-px-width"></span></p>
        </div>
    </div>
    <div class="grid_4">
        <div class="box example-block">
            <p>03 - <span class="dynamic-px-width"></span></p>
        </div>
    </div>
    <div class="clear"></div>
    <div class="grid_8">
        <div class="box example-block">
            <p>01 - <span class="dynamic-px-width"></span></p>
        </div>
    </div>
    <div class="grid_8">
        <div class="box example-block">
            <p>02 - <span class="dynamic-px-width"></span></p>
        </div>
    </div>
    <div class="clear"></div>
    <div class="grid_1 suffix_15">
        <div class="box example-block">
            <p>01 - <span class="dynamic-px-width"></span></p>
        </div>
    </div>
    <div class="clear"></div>
    <div class="grid_1 prefix_1 suffix_14">
        <div class="box example-block">
            <p>02 - <span class="dynamic-px-width"></span></p>
        </div>
    </div>
    <div class="clear"></div>
    <div class="grid_1 prefix_2 suffix_13">
        <div class="box example-block">
            <p>03 - <span class="dynamic-px-width"></span></p>
        </div>
    </div>
    <div class="clear"></div>
    <div class="grid_1 prefix_3 suffix_12">
        <div class="box example-block">
            <p>04 - <span class="dynamic-px-width"></span></p>
        </div>
    </div>
    <div class="clear"></div>
    <div class="grid_1 prefix_4 suffix_11">
        <div class="box example-block">
            <p>05 - <span class="dynamic-px-width"></span></p>
        </div>
    </div>
    <div class="clear"></div>
    <div class="grid_1 prefix_5 suffix_10">
        <div class="box example-block">
            <p>06 - <span class="dynamic-px-width"></span></p>
        </div>
    </div>
    <div class="clear"></div>
    <div class="grid_1 prefix_6 suffix_9">
        <div class="box example-block">
            <p>07 - <span class="dynamic-px-width"></span></p>
        </div>
    </div>
    <div class="clear"></div>
    <div class="grid_1 prefix_7 suffix_8">
        <div class="box example-block">
            <p>08 - <span class="dynamic-px-width"></span></p>
        </div>
    </div>
    <div class="clear"></div>
    <div class="grid_1 prefix_8 suffix_7">
        <div class="box example-block">
            <p>09 - <span class="dynamic-px-width"></span></p>
        </div>
    </div>
    <div class="clear"></div>
    <div class="grid_1 prefix_9 suffix_6">
        <div class="box example-block">
            <p>10 - <span class="dynamic-px-width"></span></p>
        </div>
    </div>
    <div class="clear"></div>
    <div class="grid_1 prefix_10 suffix_5">
        <div class="box example-block">
            <p>11 - <span class="dynamic-px-width"></span></p>
        </div>
    </div>
    <div class="clear"></div>
    <div class="grid_1 prefix_11 suffix_4">
        <div class="box example-block">
            <p>12 - <span class="dynamic-px-width"></span></p>
        </div>
    </div>
    <div class="clear"></div>
    <div class="grid_1 prefix_12 suffix_3">
        <div class="box example-block">
            <p>13 - <span class="dynamic-px-width"></span></p>
        </div>
    </div>
    <div class="clear"></div>
    <div class="grid_1 prefix_13 suffix_2">
        <div class="box example-block">
            <p>14 - <span class="dynamic-px-width"></span></p>
        </div>
    </div>
    <div class="clear"></div>
    <div class="grid_1 prefix_14 suffix_1">
        <div class="box example-block">
            <p>15 - <span class="dynamic-px-width"></span></p>
        </div>
    </div>
    <div class="clear"></div>
    <div class="grid_1 prefix_15">
        <div class="box example-block">
            <p>16 - <span class="dynamic-px-width"></span></p>
        </div>
    </div>
    <div class="clear"></div>
</div>

{% endblock %}